<template>
    <div class="assignment-header">
      <el-button @click="$router.go(-1)" link class="back-button">
        <img src="@/assets/svgs/left.svg" alt="Back" class="back-icon" />
      </el-button>
      <button  class="assign_button" @click="assignHome">提交反馈</button>
    </div>
    <div class="satisfaction-survey">
      <div class="improvement-suggestions">
        <div class="serial">
          <div class="serial1">1</div>
          <div class="serial2">改进建议</div>
        </div>
        <input v-model="inputData" placeholder="请详细描述您对课程的建议和想法..." class="suggestion_input" />
      </div>

      <!-- 其他评分问题 -->
      <div class="satisfaction-chart">
        <div class="serial">
          <div class="serial1">2</div>
          <div class="serial2">环境满意度</div>
        </div>
        <el-radio-group v-model="environment" class="select_form">
            <el-radio :value="5">95-100很满意</el-radio>
          <el-radio :value="4">90-95满意</el-radio>
          <el-radio :value="3">80-90较满意</el-radio>
          <el-radio :value="2">60-80一般</el-radio>
          <el-radio :value="1">30-60不满意</el-radio>
          <el-radio :value="0">0-30很不满意</el-radio>
        </el-radio-group>
      </div>
      <div class="satisfaction-chart">
        <div class="serial">
          <div class="serial1">3</div>
          <div class="serial2">互动满意度</div>
        </div>
        <el-radio-group v-model="interaction" class="select_form">
            <el-radio :value="5">95-100很满意</el-radio>
          <el-radio :value="4">90-95满意</el-radio>
          <el-radio :value="3">80-90较满意</el-radio>
          <el-radio :value="2">60-80一般</el-radio>
          <el-radio :value="1">30-60不满意</el-radio>
          <el-radio :value="0">0-30很不满意</el-radio>
        </el-radio-group>
      </div>
      <div class="satisfaction-chart">
        <div class="serial">
          <div class="serial1">4</div>
          <div class="serial2">教师满意度</div>
        </div>
        <el-radio-group v-model="satisfaction" class="select_form">
            <el-radio :value="5">95-100很满意</el-radio>
          <el-radio :value="4">90-95满意</el-radio>
          <el-radio :value="3">80-90较满意</el-radio>
          <el-radio :value="2">60-80一般</el-radio>
          <el-radio :value="1">30-60不满意</el-radio>
          <el-radio :value="0">0-30很不满意</el-radio>
        </el-radio-group>
      </div>
      <div class="satisfaction-chart">
        <div class="serial">
          <div class="serial1">5</div>
          <div class="serial2">速度满意度</div>
        </div>
        <el-radio-group v-model="speed" class="select_form">
            <el-radio :value="5">95-100很满意</el-radio>
          <el-radio :value="4">90-95满意</el-radio>
          <el-radio :value="3">80-90较满意</el-radio>
          <el-radio :value="2">60-80一般</el-radio>
          <el-radio :value="1">30-60不满意</el-radio>
          <el-radio :value="0">0-30很不满意</el-radio>
        </el-radio-group>
      </div>
      <div class="satisfaction-chart">
        <div class="serial">
          <div class="serial1">6</div>
          <div class="serial2">理解满意度</div>
        </div>
        <el-radio-group v-model="understanding" class="select_form">
            <el-radio :value="5">95-100很满意</el-radio>
          <el-radio :value="4">90-95满意</el-radio>
          <el-radio :value="3">80-90较满意</el-radio>
          <el-radio :value="2">60-80一般</el-radio>
          <el-radio :value="1">30-60不满意</el-radio>
          <el-radio :value="0">0-30很不满意</el-radio>
        </el-radio-group>
      </div>
    </div>
  </template>

<script setup>
import { ref } from 'vue';
import { useRouter,useRoute } from 'vue-router';
import { ElMessage } from 'element-plus';
import { submitSurveyService } from '@/api/feedbackresult';


const router = useRouter();
const inputData = ref('');
const satisfaction = ref(null);
const understanding = ref(null);
const speed = ref(null);
const interaction = ref(null);
const environment = ref(null);
//获取作业id
const route = useRoute(); // 获取当前路由对象
const feedbackId = ref(null);
feedbackId.value = route.query.feedbackId;; // 从路由参数中获取 homeworkId
console.log("获取到的问卷Id:", feedbackId.value);

const assignHome = async () => {
  try {
    const feedbackData = {
      surveyId: route.query.surveyId,  // 修正这里，使用route.query.surveyId
      opinion: inputData.value,
      satisfaction: satisfaction.value,      
      speed: speed.value,      
      interaction: interaction.value,
      environment: environment.value,
      understand: understanding.value
    };
    console.log("提交的数据:", feedbackData);
    const response = await submitSurveyService(feedbackData);
    
    if (response.code === 0) {
      ElMessage.success('提交成功');
      // 返回上一页并强制刷新
      router.push({
        path: '/student/feedback/card',
        query: { refresh: Date.now() }  // 添加时间戳强制刷新
      });
    } else {
      throw new Error(response.message || '提交失败');
    }
  } catch (error) {
    ElMessage.error(`提交失败: ${error.message}`);
  }
};
</script>


<style scoped>
.assignment-header {
  display: flex;
  height: 8lvh;
  width: 98lvw;
  background-color: #13227A;
  color: white;
}

.back-button {
  background-color: transparent;
  margin-top: 0.5lvh;
  width: 3%;
  border: none;
  color: white;
  cursor: pointer;
  font-size: 18px;
  font-weight: 700;
}

.back-button:hover {
  color: #d72d2d;
}

.assign_button {
  position: absolute;
  margin-top: 0.8%;
  margin-left: 88%;
  height: 5%;
  width: 10%;
  background-color: #1a3a8b;
  color: white;
  border: 1px solid #ffffff;
  cursor: pointer;
  border-radius: 5px;
}

.assign_button:hover {
  background-color: #98a2bb;
}

.satisfaction-survey {
  padding: 20px;
  background-color: #ffffff;
}

.improvement-suggestions {
  margin-top: 1lvh;
  margin-bottom: 20px;
}

.satisfaction-chart {
  margin-top: 20px;
  margin-top: 5lvh;
}

.select_form {
  align-items: flex-start;
  margin-left: 1lvw;
  margin-top: 1lvh;
  width: 92lvw;
  display: flex;
  flex-direction: column;
}

.serial {
  display: flex;
  width: 100%;
  height: 4lvh;
}

.serial1 {
  float: left;
  color: white;
  margin-left: 3px;
  background-color: #13227A;
  width: 20px;
  height: 20px;
  text-align: center;
  border-radius: 50%;
}

.serial2 {
  margin-left: 5px;
  font-size: 17px;
  font-weight: 700;
}

.suggestion_input {
  width: 92lvw;
  height: 4lvh;
  margin-left: 1lvw;
  margin-top: 1lvh;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 10px;
  font-size: 16px;
  resize: vertical;
}
</style>